<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框样式演示</title>
    <style>
        #d1{
            /*border: 5px solid black;*/
            border-top: 5px solid black;/*上边框  是体现*/
            border-left: 5px double red;/*左边框  双实线 */
            border-right: 5px dotted blue;/*右边框  小圆点*/
            border-bottom: 5px dashed pink;/*下边框 虚线*/
            width: 150px;
            height: 150px;
        }
        #d2{
            border: 5px solid blue;
            width: 150px;
            height: 150px;
            border-radius: 100px; /*设置边框的弧度*/
            overflow: hidden;/*设置超出的图片*/
        }

    </style>
</head>
<body>
<div id="d1"></div><br/>
<div id="d2"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=358795348,3036825421&fm=26&gp=0.jpg" width="100%" height="100%"></div>

</body>
</html>